import { FC, useEffect, useState } from "react";

import "./styled.scss";

import Swiper from "../../componets/swiper";
import NavBar from "../../componets/navBar";
import TabBar from "../../componets/tabBar";

import Films from "./components/films";

interface Props {}
const Index: FC<Props> = () => {
  // 选项卡
  const [active, setActive] = useState(0);
  const onTabChange = (i: 0 | 1) => {
    setActive(i);
  };

  // 头部样式
  const [headerStyle, setHeaderStyle] = useState({
    position: "relative",
    top: "-45px",
  });
  useEffect(() => {
    // 获取网页
    const docEl = document.documentElement;
    // 监控网页滚动
    document.addEventListener("scroll", () => {
      // 判断>=210 fixed、top 0  否则  relative top-45px
      const scrollTop = docEl.scrollTop;
      if (scrollTop >= 210) {
        setHeaderStyle({
          position: "fixed",
          top: "0px",
        });
      } else {
        setHeaderStyle({
          position: "relative",
          top: "-45px",
        });
      }
    });
  }, []);

  // 渲染
  return (
    <>
      {/* 轮播图 */}
      <Swiper />
      {/* 轮播图 */}

      {/* 头部布局 */}
      <header style={headerStyle as object}>
        {/* 导航栏 */}
        <NavBar
          title="锋神电影2"
          left={
            <>
              全国
              <i className="iconfont icon-xiangxia"></i>
            </>
          }
        />
        {/* <NavBar /> */}
        {/* 导航栏 */}
        {/* 选项卡 */}
        <div className="tabs">
          <div
            className={`item ${active || "active"}`}
            onClick={() => onTabChange(0)}
          >
            正在热映
          </div>
          <div
            className={`item ${active && "active"}`}
            onClick={() => onTabChange(1)}
          >
            即将上映
          </div>
          <div className="line" style={{ left: ["0%", "50%"][active] }}>
            <span></span>
          </div>
        </div>
        {/* 选项卡 */}
      </header>
      {/* 头部布局 */}

      {/* 电影 */}
      <Films />
      {/* 电影 */}

      {/* 底部导航栏 */}
      <TabBar />
      {/* 底部导航栏 */}
    </>
  );
};

export default Index;
